<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!--
        data和el的写法
            1.el有两种写法
                (1).在new Vue()的时候传入el选项，此时会立即挂载
                (2).先创建Vue实例，随后通过el属性绑定一个选择器（vm.&mount('#app')，Vue会选择匹配的元素，并挂载到这个元素上
            2.data有两种写法
                (1).对象式
                (2).函数式
                如何选择：目前哪种写法都可以，之后学习到组件时，必须使用函数式，否则会报错
            3.一个重要原则
                由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例，而是window

        
    -->
    <div id="app">
        <h1>{{name}}</h1>
    </div>
</body>
<script>
    const x = new Vue({
        //el: '#app',//el第一种写法，直接挂载
        /*
        data: {
            name: '张三',
            age: 18,
            sex: '男'
        }  //data第一种写法，对象式
          */
        data() {
            console.log(this)
            return {
                name: '张三',
                age: 18,
                sex: '男'
            }
        }//data第二种写法 函数式
    })
    console.log("输出创建的Vue实例：", x)
    setTimeout(() => {
        x.$mount('#app')//el第二种写法，选择进行挂载，可以条件性的挂载
    }
        , 1000)

</script>

</html>